import React, {Component,} from 'react';
import {Dimensions, StyleSheet, Text, TouchableHighlight, TouchableOpacity, View} from 'react-native';

import {SwipeListView} from 'react-native-swipe-list-view';
import * as Color from "../constant/Color";

export default class PageSwipList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            listViewData: Array(20).fill('').map((_, i) => ({key: `${i}`, text: `item #${i}`, can: (i % 2 === 0)})),
        };
    }

    /** 删除行 */
    deleteRow(rowMap, rowKey) {
        this.closeRow(rowMap, rowKey);
        const newData = [...this.state.listViewData];
        const prevIndex = this.state.listViewData.findIndex(item => item.key === rowKey);
        newData.splice(prevIndex, 1);
        this.setState({
            listViewData: newData
        });
    }

    onRowDidOpen(rowKey, rowMap) {
        console.log('你打开了这个', rowKey);
        setTimeout(() => {
            this.closeRow(rowMap, rowKey);      // 2秒之后自动合上
        }, 2000);
    }

    closeRow(rowMap, rowKey) {
        if (rowMap[rowKey]) {
            rowMap[rowKey].closeRow();
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <SwipeListView
                    useFlatList={true}
                    data={this.state.listViewData}
                    renderItem={(data, rowMap) => (
                        <TouchableHighlight
                            onPress={_ => console.log('You touched me')}
                            style={styles.rowFront}
                            underlayColor={'#AAA'}>
                            <View>
                                <Text>I am {data.item.text} in a SwipeListView</Text>
                            </View>
                        </TouchableHighlight>
                    )}
                    renderHiddenItem={(data, rowMap) => (
                        <View style={styles.rowBack}>
                            <Text>Left</Text>


                            <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnLeft1]}>
                                {
                                    data.item.can
                                        ?
                                        <Text style={styles.backTextWhite}>可以</Text>
                                        :
                                        <Text style={styles.backTextWhite}>不能</Text>
                                }

                            </TouchableOpacity>


                            <TouchableOpacity
                                style={
                                    data.item.can
                                        ?
                                        [styles.backRightBtn, styles.backRightBtnLeft_enable]
                                        :
                                        [styles.backRightBtn, styles.backRightBtnLeft_disable]
                                }
                                onPress={
                                    _ => {
                                        if (!data.item.can) return;
                                        this.closeRow(rowMap, data.item.key);
                                    }
                                }>
                                <Text style={styles.backTextWhite}>Close</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={
                                    data.item.can
                                        ?
                                        [styles.backRightBtn, styles.backRightBtnRight_enable]
                                        :
                                        [styles.backRightBtn, styles.backRightBtnRight_disable]
                                }
                                onPress={
                                    _ => {
                                        if (!data.item.can) return;
                                        this.deleteRow(rowMap, data.item.key)
                                    }}>
                                <Text style={styles.backTextWhite}>Delete</Text>
                            </TouchableOpacity>
                        </View>
                    )}
                    leftOpenValue={75}
                    rightOpenValue={-120}

                    previewRowKey={'0'}     // 开第0个
                    previewOpenValue={-120} // 开120像素
                    previewOpenDelay={1000} // 1秒之后开(开完就关)

                    onRowDidOpen={(rowKey, rowMap) => this.onRowDidOpen(rowKey, rowMap)}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1
    },
    standalone: {
        marginTop: 30,
        marginBottom: 30,
    },
    standaloneRowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        justifyContent: 'center',
        height: 50,
    },
    standaloneRowBack: {
        alignItems: 'center',
        backgroundColor: '#8BC645',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 15
    },
    backTextWhite: {
        color: '#FFF'
    },
    rowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        borderBottomColor: 'black',
        borderBottomWidth: 1,
        justifyContent: 'center',
        height: 50,
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: '#DDD',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
    },
    // 右(母)
    backRightBtn: {
        top: 0,
        bottom: 0,

        width: 40,

        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
    },
    // 右1
    backRightBtnLeft1: {
        backgroundColor: Color.lightGray,
        right: 80
    },
    // 右2_disable
    backRightBtnLeft_disable: {
        backgroundColor: 'gray',
        right: 40
    },
    // 右2_enable
    backRightBtnLeft_enable: {
        backgroundColor: 'blue',
        right: 40
    },
    // 右3_disable
    backRightBtnRight_disable: {
        backgroundColor: 'gray',
        right: 0
    },
    // 右3_enable
    backRightBtnRight_enable: {
        backgroundColor: 'red',
        right: 0
    },
    controls: {
        alignItems: 'center',
        marginBottom: 30
    },
    switchContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom: 5
    },
    switch: {
        alignItems: 'center',
        borderWidth: 1,
        borderColor: 'black',
        paddingVertical: 10,
        width: Dimensions.get('window').width / 4,
    }
});
